<breadcrumb></breadcrumb>

<mat-card>
  <mat-card-content>
    <mat-form-field>
      List length:
      <input matInput [(ngModel)]="length">
    </mat-form-field>

    <mat-form-field>
      Page size:
      <input matInput [(ngModel)]="pageSize">
    </mat-form-field>
    <mat-form-field>
      Page size options:
      <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)">
    </mat-form-field>

    <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
                   (page)="pageEvent = $event">
    </mat-paginator>

    <div *ngIf="pageEvent">
      <h5>Page Change Event Properties</h5>
      <div>List length: {{pageEvent.length}}</div>
      <div>Page size: {{pageEvent.pageSize}}</div>
      <div>Page index: {{pageEvent.pageIndex}}</div>
    </div>
  </mat-card-content>
</mat-card>
